Client-side Image Map

A clickable image, also called Image Map, is an image where the user can click upon areas in the image that are linked to other pages. There are 2 types of image maps that requires a cgi or special server support for processing the coordinates: CERN and NCSA format image maps. The image map consist of a list of coordinates and URL's that defines the areas that are linked in the image.

Since these types of maps often are a bit hard to maintain, a new standard for image maps was introduced in HTML 3.2:

In both Netscape Navigator 2.0 and Internet Explorer 3.0 it is possible to place the map description directly inside the HTML file, and let the browser handle the process when the user selects (by clicking or tapping) a specific area in the image - these types of image maps are said to be client-side image maps. Below is an example:

How to create an image map:

Create the image you want to be clickable and convert it to a GIF-image.
Insert the image in you page using HTML Assistant's Image topic.
Enter a # followed by a name in the text field Image Map URL for linking definitions e.g., #my_menu.
You do not need to check the Is Map box (or supply a URL to link to) - this will be done later, inside the map tag. You can check the Border size box and specify a value of zero.
Insert the tag Map Definition from the menu Tags : Image Map just above the Image tag in your file. Change the name of the map to "my_menu".

The file should contain something like this:

Insert the Linked Area in Image Map tag from the menu Tags : Image Map between the <MAP> ... </MAP> tags. One definition for is needed for each area that should contain a link.

Specify the path to the page, and then enter the coordinates of the image.
You can use the shareware GraphicConverter to find out the values of the COORDS attribute for a client-side image map.
Open the GIF image in GraphicConverter.
Position the cursor in the top-left corner of the rectangle in the image that should act as a link.
Use the X coordinate as value for Left
Use the Y coordinate as value for Top
Position the cursor in the bottom-right corner of the rectangle.
Use the X coordinate as value for Right
Use the Y coordinate as value for Bottom

The HTML tags for the Image map above looks like this:

Compatibility note:
To be compatible with older browsers that don't support client-side image maps, you could also add a link to a page that should be used when clicking anywere in the image - this will work just like an ordinary image link in older browsers: